<template>
  <a-layout>
    <a-layout-header class="header">
      <img src="/logo.png" alt="lang" style="float: left; width: 10%; height: 5%;">
      <h1 style="color: white;">Image To Video</h1>
    </a-layout-header>
    <a-layout-content class="content" style="padding: 20px;">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-textarea
            v-model:value="textInput"
            placeholder="Prompt text for video"
            style="margin-bottom: 20px;"
            :rows="4"
          />
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24" style="text-align: center;">
          <a-button type="primary" style="width: 80%;" @click="generateVideo">Generate</a-button>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card title="Upload Image" :bordered="false" class="center-card">
            <a-upload
              :before-upload="beforeUpload"
              :show-upload-list="false"
              ref="upload"
              accept="image/*"
            >
              <template #default>
                <div class="image-container">
                  <a-image
                    v-if="imageUrl"
                    :src="imageUrl"
                    style="cursor: pointer;"
                    :preview="false"
                    :placeholder="true"
                    :fallback="imaegPlaceholder"
                  ></a-image>
                  <a-image
                    v-else
                    style="cursor: pointer;"
                    src="#error"
                    :preview="false"
                    :placeholder="true"
                    :fallback="imaegPlaceholder"
                  ></a-image>
                </div>
              </template>
            </a-upload>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="Generate Video" :bordered="false" class="center-card">
            <video v-if="videoUrl" :src="videoUrl" controls style="width: 100%;"></video>
            <div v-else style="display: flex; justify-content: center; align-items: center; height: 195px;">
              <p>No video generated yet.</p>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Layout, Upload, Button, Row, Col, Card, Image, Input, message } from 'ant-design-vue';
import { generateVideo as generateVideoApi } from '@/api/video-api';

export default defineComponent({
  components: {
    'a-layout': Layout,
    'a-layout-header': Layout.Header,
    'a-layout-content': Layout.Content,
    'a-layout-footer': Layout.Footer,
    'a-upload': Upload,
    'a-button': Button,
    'a-row': Row,
    'a-col': Col,
    'a-card': Card,
    'a-image': Image,
    'a-textarea': Input.TextArea
  },
  data() {
    return {
      textInput: '' as string, // 文本输入
      videoUrl: null as string | null, // 视频 URL
      imageFile: null as File | null, // 图片文件
      imageUrl: null as string | null, // 图片 URL
      imaegPlaceholder: "/imaegPlaceholder.png" as string // 图片占位符
    };
  },
  methods: {
    beforeUpload(file: File) {
      const isImage = file.type.startsWith('image/'); // 判断文件类型是否为图片
      const isLt3M = file.size / 1024 / 1024 < 3; // 判断文件大小是否小于 3MB

      if (!isImage) {
        message.error('You can only upload image files!'); // 只能上传图片文件
        return false;
      }

      if (!isLt3M) {
        message.error('Image must be smaller than 3MB!'); // 图片必须小于 3MB
        return false;
      }

      this.imageFile = file;
      this.imageUrl = URL.createObjectURL(file); // 创建图片 URL
      return false; // 阻止自动上传
    },
    triggerUpload() {
      const uploadElement = this.$refs.upload as HTMLElement;
      uploadElement.click(); // 触发上传
    },
    async generateVideo() {
      if (!this.imageFile) {
        message.error('Please upload an image first!'); // 请先上传图片
        return;
      }

      if (!this.textInput.trim()) {
        message.error('Please enter a prompt text!'); // 请输入提示文本
        return;
      }

      try {
        this.videoUrl = await generateVideoApi(this.imageFile, this.textInput); // 调用 API 生成视频
        message.success('Video generated successfully!'); // 视频生成成功
      } catch (error) {
        if (error instanceof Error) {
          message.error(error.message); // 显示错误信息
        } else {
          message.error('An unknown error occurred.'); // 未知错误
        }
      }
    }
  }
});
</script>

<style>
.header {
  background-color: lightblue;
  text-align: center;
  padding: 10px 0;
}
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.center-card .ant-card-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>